#UserApp {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100vw;
    overflow: hidden;
    .UserContainer {
        padding-top: 20px;
        width: 100%;
        height: calc(120vh - 335px);
        background-color: #DCD9D4;
        background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
        .contain {
            width: 65%;
            height: 99%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            row-gap: 20px;
            .UserHeader {
                border-radius: 10px;
                padding: 10px 15px;
                width: 100%;
                height: 180px;
                display: flex;
                background-color: #f6f3f0;
                .wrapper_left {
                    width: 60%;
                    height: 100%;
                    display: flex;
                    .el-image {
                        width: 160px;
                        height: 160px;
                    }
                    .Info {
                        width: calc(100% - 180px);
                        height: 100%;
                        margin-left: 20px;
                        display: flex;
                        row-gap: 10px;
                        flex-direction: column;
                        .one {
                            font-size:30px;
                        }
                        .two {
                            display: flex;
                            align-items: center;
                            font-size: 15px;
                            color: rgba(196, 196, 196);
                            img {
                                width: 30px;
                                height: 30px;
                            }
                        }
                        .three {
                            font-size: 15px;
                            font-weight: 800;
                            color: #b7d1f9;
                        }
                        .four {
                            .el-button {
                                font-weight: 800;
                                transition: all .5s ease;
                                color: #a4c1fa;
                                transform: scale(0.88);
                                background-color: rgba(238, 245, 254,0.99);
                            }
                            .el-button:hover {
                                color: #fff;
                                background-color: rgba(100, 156, 248);
                            }
                        }
                    }
                }
                .wrapper_right {
                    width: 40%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 50px;
                    .box {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        position: relative;
                        gap: 5px;
                        span:nth-child(1) {
                            font-size: 20px;
                            font-weight: 800;
                        }
                        span:nth-child(2) {
                            font-size: 15px;
                            color: #cfc6c6;
                        }
                    }
                    .box::after {
                        content: "";
                        width: 1px;
                        height: 90%;
                        background-color: #dadada;
                        position: absolute;
                        right: -20px;
                    }
                }
            }
            .UserBody {
                width: 100%;
                height: calc(100% - 20px );
                display: flex;
                justify-content: space-between;
                .bodyLeft {
                    border-radius: 10px;
                    box-shadow: 0 0 7px 3px rgb(212 206 206);
                    width: 25%;
                    height: 100%;
                    background-color: rgba(255, 255, 255, 0.99);
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    .leftTop {
                        font-size: 20px;
                        background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);
                        background-clip: text;
                        color: transparent;
                        font-weight: 800;
                        border-bottom: 1px solid #dadada;
                        width: 100%;
                        height: 60px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    .left_wrapper {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        .box {
                            transition: background-color .5s ease;
                            cursor: pointer;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 80px;
                            gap: 20px;
                            color: #c8bfbf;
                        }
                        .box:hover {
                            background-color: rgba(100, 156, 240, 0.55);
                        }
                    }
                }
                router-view {
                    height: 100%;
                }
            }
        }
    }
}
